<template lang='pug'>
append var
-var imgurl = 'static/image/'
	.main
		.inner
			.main-top
				.main-left
					img(src=imgurl+'voice.png')
					span.notice
						.divnotice#noticeone(v-html='notice')
						.divnotice#noticetwo(v-html='notice')
			.main-top
				.main-xxx
				.main-right(style='min-width:320px;padding-left:8px')
					span {{gametype}}余额/{{gametype}}冻结余额：{{userInfo?userInfo.num:0}}/{{userInfo?userInfo.freezeNum:0}}
					//- img(src=imgurl+'point.png' 	align = 'middle'  @click='$router.push({path:"/aceuserdata"})')
					//- | 金种子：{{userInfo.seeds_amount}}枚
			//- .main-top
			//- 	span(style='width:20px;')
			//- 	.main-right
			//- 		img(src=imgurl+'ying.png' 	align = 'middle' @click='$router.push({path:"/ginseng_balance"})' style='cursor:pointer;')
			//- 		| 银种子：{{userInfo.silver_seeds_amount}}枚
			//- .main-top
			//- 	span(style='width:20px;')
			//- 	.main-right
			//- 		img(src=imgurl+'tong.png' 	align = 'middle' @click='$router.push({path:"/ginseng_balance"})' style='cursor:pointer;')
			//- 		| 铜种子：{{userInfo.copper_seeds_amount}}枚
			.main-middle
				.main-middle-son(:data-attr='"充值中心"' @click='$router.push({path:"/index_ginsengRecharge"})' style='position:relative;z-index:1000') 充值中心
			.main-top(style='margin-top: 30px;')
				.main-xxxx
				.main-right(style='font-size: 14px;background-size:100%;')
					img(src=imgurl+'ginseng.png' 	align = 'middle' @click='$router.push({path:"/aceuserdata"})' style='cursor:pointer;margin-right: 10px;')
					span(style="position: relative;top: 20px;left: 2px;") 青丹:{{userInfo?userInfo.qingDan:0}}银丹:{{userInfo?userInfo.yinDan:0}}
					br
					span(style="position: relative;top: -89px;left: 80px;") 仙丹:{{userInfo?userInfo.xianDan:0}}金丹:{{userInfo?userInfo.jinDan:0}}
			.main-bottom
				.main-bottom-son(@click="pop_one_start")
				.Popup-two(v-show='pop_two')
					.Popup-two-top
						.Popup-two-top-son 正在炼丹{{size}}%
					.Popup-two-bottom 正在生成第X枚青丹（银丹、仙丹、金丹）
				.Popup-three(v-show='pop_three')
					img.close(src=imgurl+'X-btn.png' @click='gameclose')
					.main-three-son-one(:data-attr='"游戏结束"') 游戏结束
					.cloce(data-attr='很遗憾，本次未中奖' v-show='list.qingdan == 0 && list.yindan == 0 && list.jindan == 0 && list.xiandan == 0') 很遗憾，本次未中奖
					ul.listul(v-show = 'list.qingdan || list.yindan || list.jindan || list.xiandan')
						li(v-show='list.qingdan')
							p 青丹
							p {{list.qingdan}}
						li(v-show='list.yindan')
							p 银丹
							p {{list.yindan}}
						li(v-show='list.jindan')
							p 金丹
							p {{list.jindan}}
						li(v-show='list.xiandan')
							p 仙丹
							p {{list.xiandan}}
					.sure
						.sure-son(:data-attr='"确定"' @click='gameclose') 确定
			con(:tablelist='index' @progress='showPoptwo' style='position: relative; top: -9.8%;')
</template>
<script>
import con from "./../table";
import $ from "jquery";

export default {
  data: function() {
    return {
      notice: "",
      gametype: u.getStore("winning").bitype,
      type: u.getStore("winning").type,
      size: 0,
      width: 0,
      pop_two: false,
      pop_three: false,
      list: u.getStore("chemyList") || {},
      money: u.getStore("money") || 10000,
      redicet: true,
      userInfo: u.getStore("userInfo"),
      index: {
        title: "炼丹排行榜",
        flag: false,
        table: [
          {
            title: "名次",
            list: ["青丹", "银丹", "仙丹", "金丹", "BPX"]
          },
          { title: "1", list: ["2枚", "30枚", "20枚", "23枚", "100"] },
          { title: "1", list: ["2枚", "30枚", "20枚", "23枚", "100"] },
          { title: "1", list: ["2枚", "30枚", "20枚", "23枚", "100"] },
          { title: "1", list: ["2枚", "30枚", "20枚", "23枚", "100"] },
          { title: "1", list: ["2枚", "30枚", "20枚", "23枚", "100"] },
          { title: "1", list: ["2枚", "30枚", "20枚", "23枚", "100"] }
        ],
        pop: "是否花费10" + u.getStore("winning").bitype + "开始游戏"
      }
    };
  },
  components: {
    con
  },
  created() {
    this.create();
  },
  mounted() {
    $("#app").height($(document.body).height() - 66);
    this.$parent.flag1 = false;
    this.$parent.flag2 = true;

    this.index.flag = true;
    this.animated();
  },
  methods: {
    create() {
      u.userInfo(() => {
        this.userInfo = u.getStore("userInfo");
        u.indexnotice(data => {
          if (data && data[0].data && data[0].data.length) {
            data[0].data.forEach(el => {
              this.notice +=
                el.content +
                "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp";
            });
            this.anima("1");
            this.anima("2");
          }
          u.flag = true;
          this.index.flag = true;
        });
      });
      if (u.getStore("userInfo").num < 10) {
        // alert("矿石余额不足10，请充值");
        this.$parent.loading({
          message: "矿石余额不足10，请充值",
          type: false
        });
        this.$router.push({ path: "/index_ginsengRecharge" });
        return;
      }
    },
    anima(id) {
      window.requestAnimationFrame =
        window.requestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.msRequestAnimationFrame;
      let idcla = id == "1" ? "noticeone" : "noticetwo";
      let elem = document.getElementById(idcla);
      let left = 0;
      requestAnimationFrame(step);
      function step() {
        if (left > -2 * elem.offsetWidth) {
          left -= 1;
          elem.style.left = left + "px";
          requestAnimationFrame(step);
          if (left == -elem.offsetWidth) {
            if (id == "1") {
              left = elem.offsetWidth;
            }
          } else if (left == -2 * elem.offsetWidth) {
            left = 0;
          }
        }
      }
    },
    gameclose() {
      this.pop_three = false;
      this.size = 0;
      $(".Popup-three").css({ transform: "scale(0)" });
      this.redicet = true;
      this.create();
    },
    pop_one_start() {
      if (this.redicet) {
        this.index.flag = true;
        this.redicet = false;
        var that = this;
      }
    },
    showPoptwo(flag) {
      if (u.getStore("userInfo").num < 10) {
        // alert("矿石余额不足10，请充值");
        this.$parent.loading({
          message: "矿石余额不足10，请充值",
          type: false
        });
//        this.$router.push({ path: "/index_ginsengRecharge" });
        return;
      }
      this.pop_two = flag;
      this.index.flag = false;
      u.consume(
        {
          // bpx_num: 10,
          username: u.getStore("user").userid
          // type: 2
        },
        data => {
          if (data[0].code == 200) {
            console.log(data);
            // this.animat();
            // this.pop_two = flag;
            u.userInfo(() => {
              this.userInfo = u.getStore("userInfo");
              u.flag = true;
            });
            this.list = data[0].data;
          }
          // } else {
          //   alert("游戏失败，请重新开始");
          //   this.index.flag = true;
          // }
        }
      );
      this.animat();
    },

    animat() {
      var that = this;
      var timer = setInterval(function() {
        that.size++;
        if (that.size == 100) {
          that.pop_three = true;
          that.pop_two = false;
          setTimeout(() => {
            $(".Popup-three").css({ transform: "scale(1)" });
          }, 20);

          clearInterval(timer);
        }
      }, 50);
    },

    animated() {
      var flag = true;
      setInterval(function() {
        flag = !flag;
        flag
          ? $(".main-bottom-son").css("transform", "rotate(30deg)")
          : $(".main-bottom-son").css("transform", "rotate(-30deg)");
      }, 300);
    }
  }
};
</script>

<style lang='less' scoped>
@imgurl: "../../../static/image/";
.cloce {
  text-align: center;
  width: 100%;
  color: white;
  .title(3px #a65f0a);
  height: 35px;
  padding: 0 4px;
  font-size: 12px;
}
img {
  display: inline-block;
}
.title(@color) {
  position: relative;
  color: white;
  z-index: 0;
  &:before {
    position: absolute;
    z-index: -1;
    content: attr(data-attr);
    -webkit-text-stroke: @color;
  }
}
.nav {
  height: 76px;
  width: 300px;
  margin: 0 auto;
  background-image: url("@{imgurl}z_3.png");
  background-repeat: no-repeat;
  .font;
  line-height: 47px;
  position: relative;
  top: -28px;
  margin-bottom: 22px;
  text-align: center;
}
.font {
  font-size: 27.67px;
  font-weight: 700;
  color: #fff;
}
.main {
  background-image: url("@{imgurl}danbg.png");
  background-repeat: no-repeat;
  height: 100%;
  padding-top: 30px;
  background-size: 100% 100%;
  > .inner {
    margin: 0 auto;
    max-width: 1280px;
    height: 100%;
    background-size: 100%;
    > .main-top {
      display: flex;
      justify-content: space-between;
      width: 100%;
      margin-bottom: 20px;
      .main-left,
      .main-right {
        color: #fff;
        font-size: 22px;
        font-weight: 700;
        box-sizing: border-box;
        line-height: 60px;
      }
      > .main-right {
        min-width: 277px;
        height: 68px;
        background-image: url("@{imgurl}ginseng_base.png");
        background-repeat: no-repeat;
        background-position: center right;
        background-size: 100% 80%;
        // text-shadow: 2px 3px 5px rgba(80, 55, 25, 0.7);
        text-shadow: 0 2.5px rgba(80, 55, 25, 0.7), 2px 0 rgba(80, 55, 25, 0.7),
          -2px 0 rgba(80, 55, 25, 0.7), 0 -2px rgba(80, 55, 25, 0.7);
        margin-right: 10px;
        line-height: 60px;
        span {
          font-size: 20px;
        }
        > img {
          margin-right: 13px;
          position: relative;
          top: -6px;
          z-index: 2;
          width: 63px;
          height: 65px;
        }
      }
      > .main-right-two {
        color: #fff;
        font-size: 22px;
        position: relative;
        top: -10px;
        padding-right: 30px;
        .title(5px #c64d48);
      }
      > .main-left {
        height: 60px;
        width: 480px;
        background-image: url("@{imgurl}notice_1.png");
        background-size: 480px 60px;
        // text-shadow: 2px 3px 5px rgba(80, 55, 25, 0.7);
        text-shadow: 0 2.5px rgba(80, 55, 25, 0.7), 2px 0 rgba(80, 55, 25, 0.7),
          -2px 0 rgba(80, 55, 25, 0.7), 0 -2px rgba(80, 55, 25, 0.7);
        margin-left: 30px;
        > img {
          margin: 0px 20px;
          position: relative;
          top: -10px;
        }
        > .notice {
          display: inline-block;
          width: 80%;
          height: 100%;
          overflow: hidden;
          white-space: nowrap;
          > .divnotice {
            display: inline-block;
            font-size: 20px;
            font-weight: 700;
            position: relative;
            left: 0px;
          }
        }
      }
    }
    > .main-middle {
      display: flex;
      justify-content: flex-end;
      > .main-middle-son {
        background-image: url("@{imgurl}excharge.png");
        background-repeat: no-repeat;
        height: 50px;
        width: 160px;
        background-size: 100%;
        margin-right: 30px;
        .font;
        font-size: 22px;
        line-height: 50px;
        text-align: center;
        color: #fff;
        .title(3px #a65f0a);
      }
    }
    > .main-bottom {
      margin-bottom: 40px;
      position: relative;
      top: -18.8%;
      z-index: 0;
      > .main-bottom-son {
        width: 174px;
        height: 272px;
        margin: 0 auto;
        background-image: url("@{imgurl}stove.png");
        background-repeat: no-repeat;
        position: relative;
        left: -4%;
        transition: transform 1s linear;
        transform: rotate(0deg);
      }
    }
  }
}
.fixed {
  position: absolute;
  top: 18%;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  background-size: 100%;
}
.Popup-two {
  height: 60px;
  width: 380px;
  font-size: 12px;
  transform: scale(0.5);
  color: white;
  .fixed;
  top: 19%;
  left: -10%;
  > .Popup-two-top {
    height: 36px;
    background: url("@{imgurl}Bg1.png") no-repeat;
    background-size: 100%;
    text-align: center;
    padding-left: 6px;
    > .Popup-two-top-son {
      height: 30px;
      width: 0;
      background: url("@{imgurl}Progress.png") no-repeat;
      line-height: 30px;
      background-position: 0px 2px;
      background-size: 100% 30px;
      white-space: nowrap;
      .animation(logo, 5s, ease, infinite, 1s, forwards);
    }
  }
}
.Popup-three {
  height: 130px;
  width: 248px;
  background: url("@{imgurl}Panel-two.png") no-repeat;
  transition: transform 2s ease;
  transform: scale(0);
  .fixed;
  left: -10%;
  > .main-three-son-one {
    .nav;
    .title(2px #1c6b65);
    width: 170px;
    height: 40px;
    background-size: 100%;
    font-size: 14.05px;
    line-height: 25px;
    top: -19px;
    margin: 0 auto;
  }
  > .close {
    position: absolute;
    right: 0;
  }
  ul {
    display: flex;
    justify-content: space-around;
    padding: 0 4px;
    position: relative;
    top: 0px;
    li {
      background: url("@{imgurl}Base-1.png") no-repeat;
      width: 30px;
      height: 35px;
      text-align: center;
      font-size: 12px;
      color: white;
      font-weight: 700;
      transform: scale(0.5);
      > p:nth-of-type(1) {
        span {
          font-size: 12px;
          // .title(3px #3a230a);
        }
      }
      > p:nth-of-type(2) {
        font-size: 12px;
        color: #ffd327;
      }
    }
  }
  .sure {
    position: relative;
    height: 35px;
    > .sure-son {
      transform: scale(0.806);
      height: 30px;
      width: 100px;
      background: url("@{imgurl}excharge.png") no-repeat;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      background-size: 100%;
      top: 12px;
      line-height: 30px;
      color: #fff;
      font-size: 9.67px;
      text-align: center;
    }
  }
}
.slide-scale(@start,@end,@name) {
  @keyframes @name {
    from {
      transform: scale(@start, @start);
    }
    to {
      transform: scale(@end, @end);
    }
  }
}
.slide-in(@size-start,@size-end,@name) {
  @keyframes @name {
    from {
      width: @size-start;
    }
    to {
      width: @size-end;
    }
  }
}
.slide-in(0%,100%,logo);
.animation(@animation-name,@animation-duration,@animation-timing-function,@animation-infinite,@animation-delay,@play-state) {
  -webkit-animation: @arguments;
  -moz-animation: @arguments;
  -ms-animation: @arguments;
  -o-animation: @arguments;
  animation: @arguments;
}
</style>
